class Carousel {
    constructor(tag) {
        //获取目标元素
        this.tag = document.querySelector(tag);
        //获取左右点击按钮
        this.lBtn = this.tag.querySelector(".l_btn");
        this.rBtn = this.tag.querySelector(".r_btn");
        //获取li列表
        this.list = this.tag.querySelectorAll(".img_box>ul>li");
        //获取圆点列表
        this.dots = this.tag.querySelectorAll(".dot_box>span");

        //获取所有li要移动的类名
        this.listClassName = ["list01", "list02", "list03", "list04"];
        //触发绑定
        this.eventFn();
        this.dotsFn()
        //初始化变量
        this.index = 0;
        //获取上一个初始化变量值
        this.lastIndex = 0;

    }
    // li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
            item.className = this.listClassName[idx];
        });

    }

    //点击右按钮
    eventFn() {
        this.rBtn.addEventListener("click", () => {
            //操作数组
            //添加数组第一个值到最后
            this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
            //删除数字的第一个值
            this.listClassName.pop();
            // li全部重新设置类名
            this.restListFn();

            this.lastIndex = this.index;
            if (this.index < 3) {
                this.index++;
            } else {
                this.index = 0;
            }
            this.dotsColorFn();
            // // index操作完成之后重新赋值
            // this.lastIndex = this.index;

            // this.index++;
            // //index最大值
            // if (this.index == this.listClassName.length) {
            //     this.index = 0;
            // };

            // //去除当前1i类名
            // this.list[this.lastIndex].classList.remove(this.listClassName[this.lastIndex]);
            // console.log(this.listClassName[this.lastIndex]);
            // //添加新类名.
            // this.list[this.index].classList.add(this.listClassName[this.index]);

        });
        this.lBtn.addEventListener("click", () => {
            //操作数组
            //添加数组第一个值到最后
            this.listClassName.push(this.listClassName[0]);
            //删除数字的第一个值
            this.listClassName.shift();
            // li全部重新设置类名
            this.restListFn();
            this.lastIndex = this.index;
            if (this.index > 0) {
                this.index--;
            } else {
                this.index = 3;
            }

            console.log(this.dots);
            this.dotsColorFn();

        });

    }
    //点击小圆点事件
    dotsFn() {
        this.dots.forEach(item => {
            item.addEventListener("click", () => {
                //添加数组第一个值到最后
                this.listClassName.push(this.listClassName[0]);
                //删除数字的第一个值
                this.listClassName.shift();
                // li全部重新设置类名
                this.restListFn();
                console.log(item);
                this.dotsColorFn();
            })
            // console.log(idx);
        });
    }
    //小圆点颜色
    dotsColorFn() {
        console.log(this.lastIndex, this.index);
        this.dots[this.lastIndex].classList.remove("dot_active");
        this.dots[this.index].classList.add("dot_active");
    }
    //定时器

}